<template>
    <div>
        <!-- 分类页面 -->
        <!-- 头部 -->
        <topitem :num="num" @loginmethod="loginmethod"></topitem>
        <!-- 内容 兴趣爱好-->
        <div class="container classify-box">
            <!-- site 位置 -->
            <div class="site">
                <span>当前位置</span> : 
                <a href="">看漫画 </a>> 
                <a href="">漫画大全 </a>>
                <a href="">第1页 </a>
            </div>
            <!-- 云朵 -->
            <div class="cloud">
                <img src="../assets/img/header-line-bg.png" alt="">
            </div>
            <!-- 兴趣列表 -->
            <div class="classify-title">
                <div class="item">
                    <dl class="theme clearfix">
                        <dt>题材</dt>
                        <dd>
                            <a href="" class="con">全部</a>
                            <a href="">热血</a>
                            <a href="">机战</a>
                            <a href="">运动</a>
                            <a href="">推理</a>
                            <a href="">冒险</a>
                            <a href="">搞笑</a>
                            <a href="">战争</a>
                            <a href="">神魔</a>
                            <a href="">忍者</a>
                            <a href="">竞技</a>
                            <a href="">悬疑</a>
                            <a href="">社会</a>
                            <a href="">恋爱</a>
                            <a href="">宠物</a>
                            <a href="">吸血</a>
                            <a href="">萝莉</a>
                            <a href="">御姐</a>
                            <a href="">霸总</a>
                            <a href="">玄幻</a>
                            <a href="">古风</a>
                            <a href="">历史</a>
                            <a href="">漫改</a>
                            <a href="">游戏</a>
                            <a href="">穿越</a>
                            <a href="">恐怖</a>
                            <a href="">真人</a>
                            <a href="">防疫</a>
                            <a href="">科幻</a>
                            <a href="">都市</a>
                            <a href="">武侠</a>
                            <a href="">修真</a>
                            <a href="">生活</a>
                            <a href="">动作</a>
                        </dd>
                    </dl>
                    <dl class="area clearfix">
                        <dt>地区</dt>
                        <dd>
                            <a href="" class="con">全部</a>
                            <a href="">大陆</a>
                            <a href="">日本</a>
                            <a href="">港台</a>
                            <a href="">欧美</a>
                            <a href="">韩国</a>
                        </dd>
                        <dt>进度</dt>
                        <dd>
                            <a href="" class="con">全部</a>
                            <a href="">连载</a>
                            <a href="">完结</a>
                        </dd>
                        <dt>专题</dt>
                        <dd>
                            <a href="" class="con">全部</a>
                            <a href="">精品</a>
                            <a href="">限免</a>
                            <a href="">小说改编</a>
                            <a href="">折扣专区</a>
                            <a href="">免费读</a>
                        </dd>
                        <dt>字母</dt>
                        <dd>
                            <a href="" class="con">全部</a>
                            <a href="">A</a>
                            <a href="">B</a>
                            <a href="">C</a>
                            <a href="">D</a>
                            <a href="">E</a>
                            <a href="">F</a>
                            <a href="">G</a>
                            <a href="">H</a>
                            <a href="">I</a>
                            <a href="">J</a>
                            <a href="">K</a>
                            <a href="">L</a>
                            <a href="">M</a>
                            <a href="">N</a>
                            <a href="">O</a>
                            <a href="">P</a>
                            <a href="">Q</a>
                            <a href="">R</a>
                            <a href="">S</a>
                            <a href="">T</a>
                            <a href="">U</a>
                            <a href="">V</a>
                            <a href="">W</a>
                            <a href="">X</a>
                            <a href="">Y</a>
                            <a href="">Z</a>
                        </dd>
                    </dl>
                    <dl class="search clearfix">
                        <dt>关键字</dt>
                        <dd>
                            <input type="text" placeholder="请输入筛选关键字">
                            <button>筛选</button>
                        </dd>
                    </dl>    
                </div>
                <div class="fish">
                        <span class="fish-box" >
                            <span>收起选项</span>
                            <i class="ift-more-top" ></i>
                        </span>
                </div> 
            </div>
        </div>
        <!-- 相关漫画 -->
        <div class="container relevant">
            <h2>相关漫画</h2>
            <ul class="clearfix">
                <li>
                    <a href="" class="img-box">
                        <img src="../assets/img/fl01.webp" alt="">
                        <div class="mb"></div>
                        <div class="spark">
                            <i class="ift-renqi"></i>
                            <span>458亿</span>
                        </div>
                    </a>
                    <a href="" class="title">
                        凤逆天下
                    </a>
                    <p class="renew">
                        <span>更至</span>
                        <a href="">第523话 王族魔兽2（2）</a>
                    </p>
                </li>
                <li>
                    <a href="" class="img-box">
                        <img src="../assets/img/fl01.webp" alt="">
                        <div class="mb"></div>
                        <div class="spark">
                            <i class="ift-renqi"></i>
                            <span>458亿</span>
                        </div>
                    </a>
                    <a href="" class="title">
                        凤逆天下
                    </a>
                    <p class="renew">
                        <span>更至</span>
                        <a href="">第523话 王族魔兽2（2）</a>
                    </p>
                </li>
                <li>
                    <a href="" class="img-box">
                        <img src="../assets/img/fl01.webp" alt="">
                        <div class="mb"></div>
                        <div class="spark">
                            <i class="ift-renqi"></i>
                            <span>458亿</span>
                        </div>
                    </a>
                    <a href="" class="title">
                        凤逆天下
                    </a>
                    <p class="renew">
                        <span>更至</span>
                        <a href="">第523话 王族魔兽2（2）</a>
                    </p>
                </li>
                <li>
                    <a href="" class="img-box">
                        <img src="../assets/img/fl01.webp" alt="">
                        <div class="mb"></div>
                        <div class="spark">
                            <i class="ift-renqi"></i>
                            <span>458亿</span>
                        </div>
                    </a>
                    <a href="" class="title">
                        凤逆天下
                    </a>
                    <p class="renew">
                        <span>更至</span>
                        <a href="">第523话 王族魔兽2（2）</a>
                    </p>
                </li>
                <li>
                    <a href="" class="img-box">
                        <img src="../assets/img/fl01.webp" alt="">
                        <div class="mb"></div>
                        <div class="spark">
                            <i class="ift-renqi"></i>
                            <span>458亿</span>
                        </div>
                    </a>
                    <a href="" class="title">
                        凤逆天下
                    </a>
                    <p class="renew">
                        <span>更至</span>
                        <a href="">第523话 王族魔兽2（2）</a>
                    </p>
                </li>
                <li>
                    <a href="" class="img-box">
                        <img src="../assets/img/fl01.webp" alt="">
                        <div class="mb"></div>
                        <div class="spark">
                            <i class="ift-renqi"></i>
                            <span>458亿</span>
                        </div>
                    </a>
                    <a href="" class="title">
                        凤逆天下
                    </a>
                    <p class="renew">
                        <span>更至</span>
                        <a href="">第523话 王族魔兽2（2）</a>
                    </p>
                </li>
                <li>
                    <a href="" class="img-box">
                        <img src="../assets/img/fl01.webp" alt="">
                        <div class="mb"></div>
                        <div class="spark">
                            <i class="ift-renqi"></i>
                            <span>458亿</span>
                        </div>
                    </a>
                    <a href="" class="title">
                        凤逆天下
                    </a>
                    <p class="renew">
                        <span>更至</span>
                        <a href="">第523话 王族魔兽2（2）</a>
                    </p>
                </li>
                <li>
                    <a href="" class="img-box">
                        <img src="../assets/img/fl01.webp" alt="">
                        <div class="mb"></div>
                        <div class="spark">
                            <i class="ift-renqi"></i>
                            <span>458亿</span>
                        </div>
                    </a>
                    <a href="" class="title">
                        凤逆天下
                    </a>
                    <p class="renew">
                        <span>更至</span>
                        <a href="">第523话 王族魔兽2（2）</a>
                    </p>
                </li>
                <li>
                    <a href="" class="img-box">
                        <img src="../assets/img/fl01.webp" alt="">
                        <div class="mb"></div>
                        <div class="spark">
                            <i class="ift-renqi"></i>
                            <span>458亿</span>
                        </div>
                    </a>
                    <a href="" class="title">
                        凤逆天下
                    </a>
                    <p class="renew">
                        <span>更至</span>
                        <a href="">第523话 王族魔兽2（2）</a>
                    </p>
                </li>
                <li>
                    <a href="" class="img-box">
                        <img src="../assets/img/fl01.webp" alt="">
                        <div class="mb"></div>
                        <div class="spark">
                            <i class="ift-renqi"></i>
                            <span>458亿</span>
                        </div>
                    </a>
                    <a href="" class="title">
                        凤逆天下
                    </a>
                    <p class="renew">
                        <span>更至</span>
                        <a href="">第523话 王族魔兽2（2）</a>
                    </p>
                </li>
                <li>
                    <a href="" class="img-box">
                        <img src="../assets/img/fl01.webp" alt="">
                        <div class="mb"></div>
                        <div class="spark">
                            <i class="ift-renqi"></i>
                            <span>458亿</span>
                        </div>
                    </a>
                    <a href="" class="title">
                        凤逆天下
                    </a>
                    <p class="renew">
                        <span>更至</span>
                        <a href="">第523话 王族魔兽2（2）</a>
                    </p>
                </li>
                <li>
                    <a href="" class="img-box">
                        <img src="../assets/img/fl01.webp" alt="">
                        <div class="mb"></div>
                        <div class="spark">
                            <i class="ift-renqi"></i>
                            <span>458亿</span>
                        </div>
                    </a>
                    <a href="" class="title">
                        凤逆天下
                    </a>
                    <p class="renew">
                        <span>更至</span>
                        <a href="">第523话 王族魔兽2（2）</a>
                    </p>
                </li>
                <li>
                    <a href="" class="img-box">
                        <img src="../assets/img/fl01.webp" alt="">
                        <div class="mb"></div>
                        <div class="spark">
                            <i class="ift-renqi"></i>
                            <span>458亿</span>
                        </div>
                    </a>
                    <a href="" class="title">
                        凤逆天下
                    </a>
                    <p class="renew">
                        <span>更至</span>
                        <a href="">第523话 王族魔兽2（2）</a>
                    </p>
                </li>
                <li>
                    <a href="" class="img-box">
                        <img src="../assets/img/fl01.webp" alt="">
                        <div class="mb"></div>
                        <div class="spark">
                            <i class="ift-renqi"></i>
                            <span>458亿</span>
                        </div>
                    </a>
                    <a href="" class="title">
                        凤逆天下
                    </a>
                    <p class="renew">
                        <span>更至</span>
                        <a href="">第523话 王族魔兽2（2）</a>
                    </p>
                </li>
                <li>
                    <a href="" class="img-box">
                        <img src="../assets/img/fl01.webp" alt="">
                        <div class="mb"></div>
                        <div class="spark">
                            <i class="ift-renqi"></i>
                            <span>458亿</span>
                        </div>
                    </a>
                    <a href="" class="title">
                        凤逆天下
                    </a>
                    <p class="renew">
                        <span>更至</span>
                        <a href="">第523话 王族魔兽2（2）</a>
                    </p>
                </li>
                <li>
                    <a href="" class="img-box">
                        <img src="../assets/img/fl01.webp" alt="">
                        <div class="mb"></div>
                        <div class="spark">
                            <i class="ift-renqi"></i>
                            <span>458亿</span>
                        </div>
                    </a>
                    <a href="" class="title">
                        凤逆天下
                    </a>
                    <p class="renew">
                        <span>更至</span>
                        <a href="">第523话 王族魔兽2（2）</a>
                    </p>
                </li>
                <li>
                    <a href="" class="img-box">
                        <img src="../assets/img/fl01.webp" alt="">
                        <div class="mb"></div>
                        <div class="spark">
                            <i class="ift-renqi"></i>
                            <span>458亿</span>
                        </div>
                    </a>
                    <a href="" class="title">
                        凤逆天下
                    </a>
                    <p class="renew">
                        <span>更至</span>
                        <a href="">第523话 王族魔兽2（2）</a>
                    </p>
                </li>
                <li>
                    <a href="" class="img-box">
                        <img src="../assets/img/fl01.webp" alt="">
                        <div class="mb"></div>
                        <div class="spark">
                            <i class="ift-renqi"></i>
                            <span>458亿</span>
                        </div>
                    </a>
                    <a href="" class="title">
                        凤逆天下
                    </a>
                    <p class="renew">
                        <span>更至</span>
                        <a href="">第523话 王族魔兽2（2）</a>
                    </p>
                </li>
                <li>
                    <a href="" class="img-box">
                        <img src="../assets/img/fl01.webp" alt="">
                        <div class="mb"></div>
                        <div class="spark">
                            <i class="ift-renqi"></i>
                            <span>458亿</span>
                        </div>
                    </a>
                    <a href="" class="title">
                        凤逆天下
                    </a>
                    <p class="renew">
                        <span>更至</span>
                        <a href="">第523话 王族魔兽2（2）</a>
                    </p>
                </li>
                <li>
                    <a href="" class="img-box">
                        <img src="../assets/img/fl01.webp" alt="">
                        <div class="mb"></div>
                        <div class="spark">
                            <i class="ift-renqi"></i>
                            <span>458亿</span>
                        </div>
                    </a>
                    <a href="" class="title">
                        凤逆天下
                    </a>
                    <p class="renew">
                        <span>更至</span>
                        <a href="">第523话 王族魔兽2（2）</a>
                    </p>
                </li>
                <li>
                    <a href="" class="img-box">
                        <img src="../assets/img/fl01.webp" alt="">
                        <div class="mb"></div>
                        <div class="spark">
                            <i class="ift-renqi"></i>
                            <span>458亿</span>
                        </div>
                    </a>
                    <a href="" class="title">
                        凤逆天下
                    </a>
                    <p class="renew">
                        <span>更至</span>
                        <a href="">第523话 王族魔兽2（2）</a>
                    </p>
                </li>
            </ul>
            <div class="list-sp">
                <span><i class="ift-left"></i></span>
                <span>1</span>
                <a href="">2</a>
                <a href="">3</a>
                <a href="">4</a>
                <a href="">5</a>
                <a href="">6</a>
                <a href="">7</a>
                <em>…</em>
                <a href="">11</a>
                <span><i class="ift-right"></i></span>
            </div>
        </div>
        <!-- 底部组件 -->
        <bigcat></bigcat>
        <!-- 登录组件 -->
        <loginitem v-show="loginstate" @loginmethod="loginmethod"></loginitem>
    </div>
</template>

<script>
import topitem from "../components/TopAssembly.vue" ;
import bigcat from "../components/BottomAssembly.vue" ;
import loginitem from "../components/LoginAssembly.vue" ;
    export default {
        data() {
            return {
                num: 3,
                loginstate:false,// 登录组件
            };
        },
        methods:{
            // 登录组件
            loginmethod(){
                this.loginstate = !this.loginstate;
            }
        },
        created(){
            window.scrollTo(0,0)
        },
        components:{
            topitem,
            bigcat,
            loginitem
        }
    }
</script>

<style lang="scss" scoped>
@import "../assets/css/classify.css";
</style>